<template>
    <div id="index">
        <titleVue @close="close" :title="title_text"></titleVue>
        <div class="bottom">
            <div id="container" ref="container" class="container" @scroll="containerScroll">
                <div class="sticky_p container">
                    <div class="sticky">
                        <div class="top_search">
                            <van-search v-model="searchForm.name" @search="onSearch" :clearable="false"
                                        placeholder="搜索相关作品"/>
                            <div @click="onSearch" class="btnsearch">搜索</div>
                        </div>
                        <div class="top_tab">
                            <div @click="openSelect(-1, $event)">
                                <div>{{ searchForm.min_date ? searchForm.min_date : '发布时间' }}
                                    <div class="sj"></div>
                                </div>
                            </div>
                            <div @click="openSelect(0, $event)">
                                <div>{{ searchFormLabel.area ? searchFormLabel.area : '所在区域' }}
                                    <div class="sj"></div>
                                </div>
                            </div>
                            <div @click="openSelect(1, $event)">
                                <div>{{ searchFormLabel.p_type ? searchFormLabel.p_type : '作品类型' }}
                                    <div class="sj"></div>
                                </div>
                            </div>
                            <!--                            <div @click="openSelect(2, $event)">
                                                            <div>{{ searchFormLabel.jy_type  ?searchFormLabel.jy_type:'交易类型' }}<div class="sj"></div>
                                                            </div>
                                                        </div>-->
                        </div>
                    </div>
                    <div class="list container" ref="list" style="min-height: calc(100% - 14.5rem);">
                        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                            <van-list v-if="dataList.length > 0" v-model="loading" :finished="finished"
                                      finished-text="没有更多了" @load="onLoad" :error.sync="error" error-text="请求失败,点击查询加载">
                                <van-cell v-for="(item, index) in dataList" :key="item.id" class="card"
                                          :style="(index + 1) % 2 === 0 ? 'margin-left: 0.6rem;' : ''"
                                          @click="detailClick(item)">
                                    <div style="height: 100%;">
                                        <div class="card_top_img" style="overflow: hidden;">
                                            <img v-if="!item.imgs" src="../../assets/images/pro.png"
                                                 style="width: 100%; "/>
                                            <img v-else :src="item.imgs"
                                                 style="width: 100%; height: 9.2rem; object-fit: cover;"/>
                                        </div>
                                        <div class="card_content">
                                            <div>{{ item.name }}</div>
                                            <div style="display: flex; justify-items: center">
                                                <img v-if="!item.images" src="../../assets/images/pro.png"
                                                     style="height: 1.8rem;width: 1.8rem;border-radius: 50%;"/>
                                                <img v-else :src="item.images"
                                                     style="height: 1.8rem;width: 1.8rem;border-radius: 50%;"/>
                                                <span style="margin-left:.4rem; line-height: 1.8rem">{{
                                                        item.create_user
                                                    }}</span>
                                            </div>
                                            <div class="tag">
                                                <!-- <span style="background-color: #8ed9a2;">移互部</span> -->
                                                <span style="background-color: #f0a6c7;">{{ item.area || ' ' }}</span>
                                                <span style="background-color: #6dc9fc;">{{
                                                        item.production_type || ' '
                                                    }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="isEnd" v-if="item.status === '1'">
                                        <div class="end_text">
                                            交易成功
                                        </div>
                                    </div>
                                </van-cell>
                            </van-list>
                            <van-empty v-else description="暂无作品"/>
                        </van-pull-refresh>
                    </div>
                </div>
            </div>
            <bottomMenu/>
        </div>

        <!-- 全部 弹窗-->

        <van-popup v-model:show="showArea" position="bottom">
            <van-area
                :area-list="areaList"
                @confirm="onConfirm"
                @cancel="showArea = false"
            />
        </van-popup>

        <van-popup v-model:show="query_show" position="bottom">
            <van-picker v-if="currentOpen === 1" show-toolbar :columns="queryList" @confirm="queryChange"
                        @cancel="query_show = false"/>
<!--            <van-datetime-picker v-if="currentOpen === -1" @confirm="queryChange" @cancel="query_show = false"-->
<!--                                 type="date" title="选择年月日"-->
<!--                                 :max-date="new Date()" :min-date="new Date(2023,0,1)"/>-->
        </van-popup>
        <van-calendar v-model:show="date_show" type="range" @confirm="queryChange" @cancel="query_show = false"
                      :max-date="new Date()" :min-date="new Date(2023, 0, 1)" />
    </div>
</template>

<script>
import titleVue from "../ghhz/title.vue";
import BottomMenu from "../ghhz/bottomMenu.vue";

import {Toast} from 'vant'
import util from '../../utils/util'
import {ref} from "vue";
import {areaList} from "@vant/area-data";

export default {
    name: "Home",
    components: {
        titleVue,
        BottomMenu
    },
    inject: ['$baseUrl', '$apiUrl', '$headImgUrl'],
    data() {
        return {
            title_text: "我的App",
            searchForm: {
                min_date: null,
                max_date: null,
                name: null,
                area: null,
                p_type: null
            },
            searchFormLabel: {},
            queryType: {
                '-1': 'min_date',
                '0': 'area',
                '1': 'p_type',
            },
            dataList: [], // 页面展示数据
            itemList: [], // 临时数据
            loading: false,
            finished: false,
            refreshing: false,
            error: false,
            page: {
                size: 16,
                page: 1
            },
            lastLetter: {},
            query_show: false,
            dept_list: [],
            count: {},
            queryList: [],
            currentOpen: null,
            date_show: false,
        }
    },
    watch:{
        // 监听地区是否发生变化
      result(){
          this.searchForm.area = this.result
          // 重新加载数据
          this.onLoad(true);
      }
    },
    setup() {
        const result = ref('');
        const showArea = ref(false);
        const onConfirm = (areaValues) => {
            showArea.value = false;
            result.value = areaValues
                .filter((item) => !!item)
                .map((item) => item.name)
                .join('/');
        };
        return {
            result,
            areaList,
            showArea,
            onConfirm,
        };
    },
    mounted() {
        this.onLoad();
        this.selectQueryDic();
        window.viewWillAppear = () => {
            this.onLoad(true);
        };
    },
    methods: {
        close() {// 关闭当前窗口
            // this.va.close();
        },
        onSearch() {
            this.onLoad(true);
        },
        containerScroll(e) {
            let el = e.currentTarget;

            if (el.scrollTop == 0) {
                this.$refs.list.style['min-height'] = 'calc(100% - 14.5rem)'
            } else if (el.scrollTop + el.clientHeight + 10 > el.scrollHeight) {
                this.$refs.list.style['min-height'] = 'calc(100% - 4.5rem)'
            }
        },
        openSelect(tab, event) {
            this.currentOpen = tab;
            event.stopImmediatePropagation()
            if (tab === -1) {
                this.date_show = true;
                return;
            }
            if (tab === 0) {
                this.showArea = true;
                return
            }
            this.query_show = true;
        },

        selectQueryDic() {
            const url = this.$apiUrl + '/product/getProductBaseInfo';
            this.$http.get(url).then(({data: res}) => {
                console.log(res.data.ptypes)
                if (res.code === 200) {
                    let ptypes = res.data.ptypes;
                    for (let i = 0; i < ptypes.length; i++) {
                        console.log(ptypes[i]);
                    }
                    this.queryList = res.data.ptypes;
                    // this.queryList.forEach(item=>{
                    //     item.unshift({text: "全部", value: undefined})
                    // })
                }

            }).catch(() => {
                Toast("查询条件初始化失败")
            })
        },

        // 发送请求 根据条件分页查询
        onLoad(reload) {
            if (reload || this.refreshing) {
                this.loading = true;
                this.page.page = 1;
            }
            console.log('执行的请求')
            const url = this.$apiUrl + '/product/queryProductList';
            this.$http.post(url, this.searchForm, {params: this.page}).then(({data: res}) => {
                if (res.code === 200) {
                    console.log(res.data)
                    let list = res.data;
                    for (let i = 0; i < list.length; i++) {
                        let item = list[i];
                        list[i].imgs = this.$headImgUrl + item.imgs.split(',')[0];
                        if (item.area.split('/').length > 1) {
                            list[i].area = item.area.split('/')[1]
                        }
                        if (item.images !== null || item.images !== 'null' || item.images !== '') {
                            list[i].images = this.$headImgUrl + item.images
                        }
                    }
                    if (!reload && !this.refreshing) {
                        this.dataList.push(...list)
                        console.log(this.dataList)
                    }
                    this.dataList = list;
                    if (list.length < this.page.size) {
                        this.finished = true;
                    }
                    this.page.page++;
                    this.error = false;
                } else {
                    this.error = true;
                }

            }).catch(() => {
                this.error = true;
            }).finally(() => {
                this.loading = false;
                if (this.refreshing) {
                    this.refreshing = false;
                }
            })
        },

        // 清空列表数据
        onRefresh() {
            this.finished = false;
            this.searchForm.area = null;
            this.searchForm.p_type = null;
            this.searchForm.name = '';
            this.searchForm.max_date = null;
            this.searchForm.min_date = null;
            this.searchFormLabel = {};
            // 重新加载数据
            this.onLoad();
        },

        showDeptSelect() {
            this.query_show = true;
        },

        queryChange(val) {
            if (this.currentOpen === -1) {
                this.searchForm.min_date = new Date(val[0]).format('yyyy-MM-dd');
                this.searchForm.max_date = new Date(val[1]).format('yyyy-MM-dd');
                this.date_show = false;
            } else if (this.currentOpen === 1) {
                console.log(val)
                this.searchForm.p_type = val ? val : null;
            }
            this.query_show = false;
            this.onLoad(true)
        },
        // 点击作品 跳转到详情页面
        detailClick(item) {
            if (item.status === '1') {
                return;
            }
            // item.zanState = zanState;
            this.$router.push("/AppHome/DetailPage?id=" + item.id)
            // window.open("#/app/detailPage?id=" + item.id);
            // window.detail = item;
        },

    }
};
</script>
<style scoped>
#index {
    height: 100%;
    font-size: 1rem;
}

.bottom {
    height: calc(100vh - 2.75rem);
    position: relative;
    overflow: hidden;
    background: url(../../assets/images/bg.png) no-repeat;
    background-size: 100% 100%;
    top: -2px;
}

#container {
    height: calc(100vh - 3.2rem);
    overflow-y: auto;
    overflow-x: hidden;
    width: calc(100vm + .4rem);
    position: relative;
    /* background: #ecf8fe; */
}

#container .card .card_top_img {
    height: 50%;
}

#container .card .card_content {
    padding: 0 .64rem .4rem;
    font-size: .8rem;
    line-height: 1.2;
}

#container .card .card_content > div {
    margin-top: .6rem;
    font-weight: bold;

}

#container .card .tag {
    color: #fff;

}

#container .card .tag > span {
    /* display: inline-block; */
    /* height: 1.2rem; */
    width: 28%;
    padding: .12rem .5rem;
    text-align: center;
    margin-right: 0.4rem;
}

#container .card > div {
    height: 100%;
}

.app_top {
    height: 10rem;
}

#container .sticky {
    /* height: calc(100% - 10rem); */
    position: sticky;

    top: -2px;
    padding: 0 1rem 0 .6rem;
    background: #ecf8fe;
    padding-top: .4rem;
}

#container .sticky_p {
    margin-top: 10rem;
    height: 100%;
    position: relative;
}

#container .top_tab {
    margin-top: .4rem;
    height: 2rem;
    line-height: 2rem;
    font-size: .8rem;
    display: flex;
    font-weight: bold;
    justify-content: space-between;

}

#container .top_tab .sj {
    border-top: .6rem solid #f6960e;
    border-left: .4rem solid transparent;
    border-right: .4rem solid transparent;

    display: inline-block;
    margin-left: .2rem;
}

#container .top_search {
    position: relative;
}

#container .top_search >>> .van-search {
    padding: 0;
}

#container .btnsearch {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 1rem;
    width: 3.2143rem;
    height: 1.4rem;
    text-align: center;
    border-radius: 0.5rem;
    background-color: #97C0FB;
    color: #f7f7f7;

    line-height: 1.4rem;
    font-size: .8rem;
}

#container .top_search >>> .van-search__content {
    border-radius: 10px;
}

#container .top_search >>> .van-search {
    background: transparent;
    padding-left: 0;
}


#container .list {

    background: #ecf8fe;
    width: 100%;
    transition: all 1s;
    padding: 0 0 0 0.7rem;
    overflow-y: auto;
    position: sticky;
}

#container .list .card {
    width: calc(50% - 0.3rem);
    display: inline-block;
    height: 16rem;
    border-radius: .4rem;
    padding: 0;
    position: relative;
    margin-bottom: 0.4rem;
}

.isEnd {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #eabcbc;
    opacity: .8;
    top: 0;
    z-index: 3;
}

.isEnd .end_text {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-style: oblique;
}

.bottom .list .vant-list {
    overflow: hidden;

}


.list >>> .van-list .van-list__loading::before {
    content: '';
    display: block;
    clear: both;
}

.list >>> .van-list .van-list__error-text::before {
    content: '';
    display: block;
    clear: both;
}

.list >>> .van-list .van-list__finished-text::before {
    content: '';
    display: block;
    clear: both;
}

.list >>> .van-list__error-text,
.list >>> .van-list__finished-text,
.list >>> .van-list__loading {
    font-size: .8rem;
}

.list >>> .van-pull-refresh {
    min-height: 100%;
    position: absolute;
    width: calc(100% - 1.6rem);
}

.container::-webkit-scrollbar {
    /* 隐藏滚动条 */
    display: none;
}

</style>
